<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
     <el-button-group>
    <el-button type="primary"  icon="plus" @click="handlerAdd">添加</el-button>
    <el-button type="primary"  icon="edit" @click="handlerEdit">编辑</el-button>
    <el-button type="primary"  icon="delete" @click="handleDelete">删除</el-button>
  </el-button-group>
  </div>

<el-row>
  <el-col :span="8" style='margin-top:15px;'>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      class="filter-tree"
      :data="treeData"
      node-key="id"
      highlight-current
      :props="defaultProps"
      :expand-on-click-node="false"
      :render-content="renderContent"
      :filter-node-method="filterNode"
      ref="menuTree"
      default-expand-all
      @node-click="getNodeData"
      >
    </el-tree>
  </el-col>
  <el-col :span="15" style='margin-top:15px;'>
     <el-card class="box-card">
    <el-form :label-position="labelPosition" :rules="menuRules" label-width="80px" :model="form" ref="form">
      <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" :disabled="formEdit"  placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="父级节点" prop="parentId">
          <menu-treeselect
            ref="selectTree"
            :options="selectTree"
            :normalizer="normalizer"
            :disabled="formEdit"
            :show-count="true"
            v-model="form.parentId"
            placeholder="默认为根节点">
          </menu-treeselect>
      </el-form-item>
      <el-form-item label="图标" prop="icon">
          <svg-icon :icon-class="form.icon?form.icon:''"></svg-icon>
          <el-button type="text" @click="selectIconDialog=true" :disabled="formEdit">选择</el-button>
      </el-form-item>
        <el-form-item label="资源路径" prop="path" v-if="form.type == 1">
          <el-input v-model="form.path" :disabled="formEdit" placeholder="请输入资源路径"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type" >
          <el-radio-group v-model="form.type" :disabled="formEdit">
            <el-radio class="radio" label="0">目录</el-radio>
            <el-radio class="radio" label="1">菜单</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="enable">
          <el-radio-group v-model="form.enable" :disabled="formEdit">
                <el-radio class="radio"  :label="1">显示</el-radio>
                <el-radio class="radio"  :label="0">隐藏</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-slider v-model="form.orderNum" :disabled="formEdit"></el-slider>
      </el-form-item>
      <!-- <el-form-item label="描述"   prop="description">
          <el-input v-model="form.description" :disabled="formEdit" placeholder="请输入描述"></el-input>
      </el-form-item> -->
       <el-form-item v-if="formStatus == 'update'">
        <el-button type="primary" @click="update">更新</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
      <el-form-item v-if="formStatus == 'create'">
        <el-button type="primary" @click="create">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
     </el-card>
    <el-card class="box-card" v-show="form.type == 1">
        <span>按钮或资源</span>
      <btn-element :menuId='currentId' ref="menuElement"></btn-element>
    </el-card>
  </el-col>
</el-row>
    <el-dialog title="选择图标" :visible.sync="selectIconDialog" size="tiny">
            <div class="select-tree"  style="width:80%;margin:10px auto">
              <el-scrollbar
                tag="div"
                class='is-empty'
                wrap-class="el-select-dropdown__wrap"
                view-class="el-select-dropdown__list">
                <div class="icons-wrapper">
                  <i @click="selectIcon('baobiaoguanli')"><svg-icon  :icon-class="'baobiaoguanli'"></svg-icon></i>
                  <i @click="selectIcon('caidanguanli')"><svg-icon  :icon-class="'caidanguanli'"></svg-icon></i>
                  <i @click="selectIcon('cityguanli')"><svg-icon  :icon-class="'cityguanli'"></svg-icon></i>
                  <i @click="selectIcon('debuglog')"><svg-icon  :icon-class="'debuglog'"></svg-icon></i>
                  <i @click="selectIcon('example')"><svg-icon  :icon-class="'example'"></svg-icon></i>
                  <i @click="selectIcon('eye')"><svg-icon  :icon-class="'eye'"></svg-icon></i>
                  <i @click="selectIcon('form')"><svg-icon  :icon-class="'form'"></svg-icon></i>
                  <i @click="selectIcon('jiaoseguanli')"><svg-icon  :icon-class="'jiaoseguanli'"></svg-icon></i>
                  <i @click="selectIcon('loginlog')"><svg-icon  :icon-class="'loginlog'"></svg-icon></i>
                  <i @click="selectIcon('msgguanli')"><svg-icon  :icon-class="'msgguanli'"></svg-icon></i>
                  <i @click="selectIcon('nested')"><svg-icon  :icon-class="'nested'"></svg-icon></i>
                  <i @click="selectIcon('notice')"><svg-icon  :icon-class="'notice'"></svg-icon></i>
                  <i @click="selectIcon('password')"><svg-icon  :icon-class="'password'"></svg-icon></i>
                  <i @click="selectIcon('quanxianguanli')"><svg-icon  :icon-class="'quanxianguanli'"></svg-icon></i>
                  <i @click="selectIcon('table')"><svg-icon  :icon-class="'table'"></svg-icon></i>
                  <i @click="selectIcon('tree')"><svg-icon  :icon-class="'tree'"></svg-icon></i>
                  <i @click="selectIcon('tubiao')"><svg-icon  :icon-class="'tubiao'"></svg-icon></i>
                  <i @click="selectIcon('password')"><svg-icon  :icon-class="'password'"></svg-icon></i>
                  <i @click="selectIcon('userguanli')"><svg-icon  :icon-class="'userguanli'"></svg-icon></i>
                  <i @click="selectIcon('xitongguanli')"><svg-icon  :icon-class="'xitongguanli'"></svg-icon></i>
                  <i @click="selectIcon('zidian')"><svg-icon  :icon-class="'zidian'"></svg-icon></i>
                  <i @click="selectIcon('zoushi')"><svg-icon  :icon-class="'zoushi'"></svg-icon></i>
                  <i @click="selectIcon('magazine')"><svg-icon  :icon-class="'magazine'"></svg-icon></i>
                  <i @click="selectIcon('lunbo')"><svg-icon  :icon-class="'lunbo'"></svg-icon></i>
                  <i @click="selectIcon('content')"><svg-icon  :icon-class="'content'"></svg-icon></i>
                  <i @click="selectIcon('piccontent')"><svg-icon  :icon-class="'piccontent'"></svg-icon></i>
                  <i @click="selectIcon('videomanage')"><svg-icon  :icon-class="'videomanage'"></svg-icon></i>
                  <i @click="selectIcon('ting')"><svg-icon  :icon-class="'ting'"></svg-icon></i>  
                  <i @click="selectIcon('qamanage')"><svg-icon  :icon-class="'qamanage'"></svg-icon></i>  
                  <i @click="selectIcon('draft')"><svg-icon  :icon-class="'draft'"></svg-icon></i>  
                  <i @click="selectIcon('daysign')"><svg-icon  :icon-class="'daysign'"></svg-icon></i> 
                  <i @click="selectIcon('activity')"><svg-icon  :icon-class="'activity'"></svg-icon></i> 
                  
                </div>
              </el-scrollbar>
            </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="selectIconDialog = false">取 消</el-button>
          <el-button @click="clearIcon">清除</el-button>
          <el-button type="primary" @click="selectIconDialog = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
  // import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'


import { getMenuTree,delmenuRequest,getMenuBtn,menuUpdate, menuInsert } from '@/api/sys/menu'
import { mapGetters } from 'vuex'
export default {
  components: {
    'btn-element': () => import('@/components/element'),
    'menu-treeselect':Treeselect
  },
  data() {
    return {
      selectIconDialog:false,
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: ['menu', 'dirt'],
      treeData: [],
      selectTree:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      labelPosition: 'right',
      menuRules:{
        name:[{
          required: true,
          message:'名称不能为空',
          trigger: 'blur'
        }],
        type:[{
          required: true,
          message:'类型不能为空',
          trigger: 'blur'
        }],
        path:[{
          required: true,
          message:'资源路径不能为空',
          trigger: 'blur'
        }]
      },
      tempData:{},
      form: {
        id: undefined,
        name: undefined,
        parentId: undefined,
        path: undefined,
        icon: undefined,
        orderNum: undefined,
        path: '',
        enable: 1,
        type: '0',
        component: undefined
      },
      currentId: 0
    }
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      getMenuTree().then(response => {
          if (response.code === 0) {
            this.treeData = response.data
            this.selectTree =  JSON.parse(JSON.stringify(this.treeData))
            this.$nextTick(function () {
                this.$refs.menuTree.setCurrentKey(this.form.id)
            })
          }
      })
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    selectIcon(icon){
        this.form.icon = icon
        this.selectIconDialog = false
    },
    renderContent(h, {node, data, store}) {
        return (
        <span>
          <span>
            <span><svg-icon  icon-class={data.icon?data.icon:""}></svg-icon>&nbsp;{node.label}</span>
          </span>
        </span>)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getNodeData(data) {
      this.$nextTick(function(){
          const currentNode = this.$refs.selectTree.getNode(data.id)
          currentNode.raw.isDisabled = true
      })
      this.onCancel()
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      this.form = JSON.parse(JSON.stringify(data))
      this.form.type = this.form.type+''
      if(this.form.parentId === 0){
        this.form.parentId = undefined
      }
      this.tempData = JSON.parse(JSON.stringify(this.form))
      this.currentId = data.id
      this.showElement = true
      if(this.form.type === "1"){
          this.$refs.menuElement.menuId = data.id
          this.$refs.menuElement.getList()
      }

    },
    handlerEdit() {
        const id = this.form.id
        if(id === "" || id === undefined){
          this.$notify({
                title: '警告',
                message: '请先选择需要编辑的菜单',
                type: 'warning',
                duration: 2000
          });
          return
        }
        this.selectTree = JSON.parse(JSON.stringify(this.selectTree))
        this.formEdit = false
        this.formStatus = 'update'
    },
    handlerAdd() {
      
      this.tempData = JSON.parse(JSON.stringify(this.form))
      this.resetForm()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete() {
      if(this.form.id === undefined){
         this.$notify({
                title: '警告',
                message: '请先选择需要删除的菜单',
                type: 'warning',
                duration: 2000
          });
          return
      }
      this.$confirm('此操作将删除【'+this.form.name+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            this.form.children = [];
            delmenuRequest(this.form).then((response) => {
              if(response.code === 0){
                this.getList();
                this.currentId = undefined
                this.resetForm();
                this.$message({
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
      }).catch(() => {

      })
    },
    update() {
          const set = this.$refs
          set['form'].validate(valid => {
          if(valid){
            const data = JSON.parse(JSON.stringify(this.form))
            if(data.parentId === undefined || data.parentId === ""){
              data.parentId = 0;
            }
            menuUpdate(data).then((response) =>{
              if(response.code === 0){
                this.tempData = data
                this.tempData.type =this.tempData.type + ''
                if(this.tempData.parentId === 0){
                    this.currentId = this.tempData.id
                    this.tempData.parentId = undefined
                }
                this.getList()
                this.onCancel()
                this.$message({
                  message: response.msg,
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
       })
    },
    create() {
       const set = this.$refs
       set['form'].validate(valid => {
          if(valid){
            const data = JSON.parse(JSON.stringify(this.form))
            if(data.parentId === undefined || data.parentId === ""){
              data.parentId = 0
            }
            menuInsert(data).then((response) =>{
              if(response.code === 0){
                this.tempData.type =this.tempData.type + ''
                if(data.parentId === 0){
                    this.currentId = this.tempData.id
                    this.tempData.parentId = undefined
                }
                this.getList()
                this.onCancel()
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              }
            })
          }
       })
    },
    onCancel() {
      this.formEdit = true
      this.formStatus = ''
      const set = this.$refs
      set['form'].clearValidate()
      this.resetForm()
      this.form = JSON.parse(JSON.stringify(this.tempData))

    },
    clearIcon(){
      this.form.icon = ''
      this.selectIconDialog = false
    },
    resetForm() {

      if(this.currentId === 0){
        this.currentId = undefined
      }
      this.form = {
        id: undefined,
        name: undefined,
        parentId: this.currentId,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: '',
        enable: 1,
        type: '0'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 .select-tree .icons-wrapper{
    display: block;
  }
  .select-tree .is-empty i{
    width: 30px;
    height: 30px;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
  }
  .select-tree .is-empty i:hover{
    background-color: #0d6aad;
    color: #ffffff;
  }
</style>
